<template>
  <div class="wrap">
    <div class="app-info-wrapper">
      <h3 style="text-align: center">图标素材</h3>
      <el-form ref="form" label-width="120px">
        <el-form-item label="应用图标">
          <el-upload
            class="upload-demo"
            action=""
            :data="params"
            :http-request="uploadIcon"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="iconList"
            list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">尺寸16*16,大小20k以内,PNG格式</div>
          </el-upload>
        </el-form-item>

        <el-form-item label="应用小图标">
          <el-upload
            class="upload-demo"
            action=""
            :data="params"
            :http-request="uploadMiniIcon"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="miniIconList"
            list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">尺寸512*512,大小200k以内,JPG、PNG格式,建议使用直角图标</div>
          </el-upload>
        </el-form-item>

        <el-form-item label="应用截图">
          <el-upload
            action=""
            :http-request="uploadScreenshot"
            :data="params"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :file-list="screenshotList"
            multiple>
            <i class="el-icon-plus"></i>
            <div slot="tip" class="el-upload__tip">请上传2-5张截图(尺寸保持一致),单张图片不超过1M,截图不能小于320*480像素,推荐480*480像素,JPG、PNG格式</div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible" size="tiny">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
      </el-form>
    </div>

    <div class="button-group">
      <el-button type="danger" @click="back">上一步</el-button>
      <el-button type="primary" @click="next">下一步</el-button>
    </div>
  </div>
</template>

<script>
  import { uploadIcon, uploadMiniIcon, uploadScreenshot } from '@/api/apps'

  export default {
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        params: {
          id: this.$route.id
        },
        iconList: [],
        miniIconList: [],
        screenshotList: []
      };
    },
    methods: {
      back(){
        this.$router.go(-1)
      },
      next(){
        this.$router.push({
          name: 'pending'
        })
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file){
        console.log(file)
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      uploadIcon,
      uploadMiniIcon,
      uploadScreenshot
    }
  }
</script>

<style lang="scss" scoped>
  .wrap{
    display: flex;
    flex-direction: column;
    align-items: center;

    .button-group{
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }
  }
</style>
